<template>
    <div class="captain">
        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column align="left" prop="id" :label="$t('common.serialNumber')"></el-table-column><!--序号-->
                <el-table-column align="left" prop="name" :label="$t('common.accountName')"></el-table-column><!--账号名称-->
                <el-table-column align="left" :label="$t('authority.accountStatus')" prop="roleName"><!--账号状态-->
                    <template slot-scope="scope">{{ scope.row.isDelete == '0' ? $t('common.enable') : $t('common.close')}}</template>
                </el-table-column>
                <el-table-column align="left" prop="remainOrderCount" :label="$t('authority.remainingOrder')"></el-table-column><!--剩余单量-->
                <el-table-column align="left" prop="auditorCount" :label="$t('common.operation')">
                    <template slot-scope="scope">
                        <el-button @click="showDialog(scope.row)" type="text" :disabled="scope.row.isDelete == '1'">{{$t('authority.allotRole')}}</el-button>
                    </template>
                </el-table-column>
            </el-table><!--end table-->
        </div>

        <pagination @pageChange="pageChange" :page="page">分页组件</pagination>

        <!--分配角色start-->
        <el-dialog :visible.sync="setRoleTypeDialog" width="416px" :title="$t('authority.allotRole')">
            <el-form ref="form" :model="form" :rules="rules" label-position="top">
                <el-form-item label="" :label="$t('common.accountName')"><!--账号名称-->
                    <el-input :disabled="true" v-model="form.auditorName" type="text" :placeholder="$t('verify.plsInput')"></el-input>
                </el-form-item>
                <el-form-item prop="roleType" :label="$t('authority.allotRole')"><!--分配角色-->
                    <el-select v-model="form.roleType" style="width: 100%;" @change="roleTypeChange">
                        <el-option v-for="auditor in auditorTypeList" :key="auditor.id" :value="auditor.id"
                                   :label="$root.local==='zhCN'?auditor.name:auditor.idName"
                                   v-if="auditor.id!==0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.roleType === 1" :label="$t('authority.groupList')" prop="groupId"><!--组别列表-->
                    <el-select v-model="form.groupId" style="width: 100%;" :placeholder="$t('verify.plsChoose')">
                        <el-option v-for="item in captainList" :key="item.auditorId" :value="item.auditorId" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="setRoleTypeDialog = false" type="default">{{$t('common.cancel')}}</el-button>
                <el-button @click="setRoleType" type="primary">{{$t('common.submit')}}</el-button>
            </div>
        </el-dialog><!--分配角色end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';

    export default {
        name: 'waitingList',
        props: {
            activeTab: {
                type: String,
                required: true
            },
            searchForm: {
                type: Object,
                required: true
            },
            auditorTypeList: {
                type: Array,
                required: true
            }
        },
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                thisRoleType: 0,
                isListening: false,
                form: {
                    auditorId: '',
                    auditorName: '',
                    groupId: '',
                    roleType: ''
                },
                rules: {
                    roleType: [
                        {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'}
                    ],
                    groupId: [
                        {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'}
                    ],
                },
                setRoleTypeDialog: false,
                captainList: []
            };
        },
        watch: {
            activeTab(val) {
                if ('waitingList' === val) {
                    this.page.currentPage = 1;
                    this.getTableData();
                    this.getCaptainList();
                }
            },
            'searchForm.search'(val) {
                if (val && this.activeTab === 'waitingList') {
                    this.page.currentPage = 1;
                    this.getTableData();
                }
            }
        },
        methods: {
            getTableData(page = this.page) {
                const params = {
                    type: this.thisRoleType,
                    name: this.searchForm.accountName,
                    isDelete: this.searchForm.isDelete,
                    leaderId: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                this.$api.authorityManage.getAllAuditorInfo(params).then((res) => {
                    const {status, data, error} = res;
                    // console.log(res);
                    if ('1' === status && '00000000' === error) {
                        this.tableData = data.data;
                        this.page.recordsTotal = data.pageCount;
                        if (this.searchForm.search) {
                            this.$emit('search', this.searchForm);
                        }
                        this.tableMaxHeight = window.document.body.clientHeight - 265;
                    }
                });
            },
            showDialog(row) {
                this.form.auditorId = row.auditorId;
                this.form.auditorName = row.name;
                this.form.groupId = row.leaderId;
                this.setRoleTypeDialog = true;
            },
            setRoleType() {
                this.$refs.form.validate((val) => {
                    if (val) {
                        const params = {
                            auditorId: this.form.auditorId,
                            type: this.form.roleType,
                            leaderId: this.form.groupId
                        };
                        this.$api.authorityManage.updateAuditorInfo(params).then((res) => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.setRoleTypeDialog = false;
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.getTableData();
                                this.form.roleType = '';
                            }
                        });
                    }
                });
            },
            getCaptainList() {
                const params = {
                    type: 3,
                    name: '',
                    leaderId: ''
                };
                this.$api.authorityManage.getAllAuditorInfo(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data.data) {
                        this.captainList = data.data;
                    }
                });
            },
            roleTypeChange(val) {
                if (val !== 1) {
                    this.form.groupId = '';
                }
            }
        },
        created() {
            if (this.activeTab === 'waitingList') {
                this.getTableData();
                this.getCaptainList();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .data_list {
        background-color: #fff;
        padding: 10px 16px;
    }
</style>
